<template>
  <div class="detail-base-info" v-if="Object.keys(goodsInfo).length !== 0">
    <!-- 详情页标题 -->
    <div class="info-title detail-c">
      {{ goodsInfo.title }}
    </div>
    <!-- 详情页价格 -->
    <div class="info-price">
      <span class="new-price detail-c">{{ goodsInfo.price }}</span>
      <span class="old-price">{{ goodsInfo.oldPrice }}</span>
      <span v-if="goodsInfo.discount" class="discount">{{ goodsInfo.discount }}</span>
    </div>
    <!-- 详情页价格下面的 -->
    <div class="info-other">
      <span>{{ goodsInfo.columns[0] }}</span>
      <span>{{ goodsInfo.columns[1] }}</span>
      <span>{{ goodsInfo.service[goodsInfo.service.length-1].name }}</span>
    </div>
    <div class="info-service" v-if="goodsInfo.service">
      <span class="info-service-item" v-for="index in goodsInfo.service.length-1" :key="index">
        <img :src="goodsInfo.service[index-1].icon" alt="">
        <span>{{goodsInfo.service[index-1].name}}</span>
      </span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DetailBaseInfo",
    props: {
      goodsInfo: {
        type: Object,
        default() {
          return {}
        }
      }
    }
  }
</script>

<style scoped>
  .detail-c {
    margin: 10px;
    font-size: 15px;
    font-weight: 600;
  }
  .new-price {
    font-size: 20px;
    color: red;
  }
  .old-price {
    font-size: 13px;
    margin-left: -6px;
    text-decoration: line-through;
    color: #aaa;
  }
  .info-price {
    position: relative;
  }
  .discount {
    position: absolute;
    top: -3px;
    background-color: rgb(245, 123, 143);
    font-size: 12px;
    padding: 3px;
    border-radius: 15px;
    color: #fff;
    margin-left: 3px;
  }
  .info-other {
    display: flex;
    text-align: center;
    justify-content: space-between;
    margin: 15px 8px;
    font-size: 13px;
    color: #aaa;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
  .info-service {
    display: flex;
    justify-content: space-between;
    border-bottom: 6px solid rgb(238, 236, 236);
    padding-bottom: 18px;
    margin: 0px 6px;
    margin-bottom: 20px;
  }
  .info-service-item {
    font-size: 13px;
    text-align: center;
  }
  .info-service-item img {
    width: 13px;
    height: 13px;
    vertical-align: middle;
  }
</style>